<template>
  <div class="login">
    <div class="login-wrap">
      <el-row :gutter="20">
        <el-col :offset="4" :span="16">
          <el-input class="w-50" v-model="user.username" placeholder="用户账号"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="4" :span="16">
          <el-input class="w-50" v-model="user.password" placeholder="用户密码"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="4" :span="16">
          <el-button type="primary" style="width: 100%;" @click="_login">登录</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16" :offset="4">
          <hr style="color: white">
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {login} from "../api/login/index.js";
import {ElMessage} from 'element-plus';

export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    }
  },
  methods: {
    _login() {
      const user = this.user;
      if (user.username.length === 0 || user.password.length === 0) {
        ElMessage.error("用户名密码不能为空");
        return;
      }
      login(user).then(resp => {
        this.$router.push({path: "/home/goods"})
      })
    }
  }
}
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/img.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .login-wrap {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(7, 17, 37, .2);

    .el-row {
      margin-bottom: 24px;
    }
  }
}
</style>